import { Card, Row, Col, Typography, List, Divider } from 'antd';
import styles from './index.less';

const { Title, Text } = Typography;

const FrontendInfrastructure: React.FC = () => {
  return (
    <div className={styles.container}>
      {/* 上半部分：初级和高级前端对比 */}
      <Row gutter={24} className={styles.comparison}>
        <Col span={24}>
          <Card title={<Title level={2}>初中级前端个人描述</Title>}>
            <List
              dataSource={[
                { title: '项目模块开发', content: '具备一定的项目开发经验，能够在指导下独立承担小型项目模块的开发工作' },
                { title: '框架运用能力', content: '熟练运用 Vue、React 主流框架搭建页面，完成基础功能交互，对框架核心原理有较好的理解，能依据官方文档排查常见问题' },
                { title: '构建工具掌握', content: '熟练掌握 Webpack、Vite 等常用前端构建工具的基础配置，可进行项目打包、本地开发服务器启动，能根据项目需求调整简单的构建参数优化资源加载' },
                { title: '性能问题处理', content: '面对常见的前端性能瓶颈，如页面加载缓慢、脚本执行卡顿等，具备基础的排查与解决能力，熟知浏览器缓存机制、代码压缩合并等优化手段' },
                { title: '浏览器兼容性处理', content: '在处理多浏览器兼容性问题上积累了一定经验，熟悉 Chrome、Firefox、Safari、IE（适配特定旧项目需求）等主流浏览器的特性差异，能够运用 Polyfill、CSS 兼容性前缀等技巧确保页面正常显示' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>
        <Col span={24}>
          <Card title={<Title level={2}>高级前端个人描述</Title>}>
            <List
              dataSource={[
                { title: '前端技术体系精通', content: '全方位精通 web 前端技术体系，涵盖 HTML5、CSS3、JavaScript（ES6 +）核心规范，深度理解浏览器渲染原理、事件循环机制，能从底层优化前端性能，打造极致用户体验' },
                { title: '架构设计专长', content: '擅长设计高扩展性、高复用性、高可维护性的前端架构，遵循设计模式与模块化原则，产出高质量、易拓展的代码库，供团队复用，提升整体开发效率' },
                { title: '领域架构抽象能力', content: '凭借深厚的领域知识沉淀，能够精准抽象出业务领域通用架构，制定前端技术方案，适配不同业务场景，降低开发成本与后期维护难度' },
                { title: '核心难题攻克', content: '针对业务领域核心技术难题，如海量数据实时渲染、复杂交互场景优化、跨平台兼容性挑战等，具备独立研究、选型、攻坚并落地解决方案的能力' },
                { title: '痛点挖掘与解决', content: '善于主动挖掘业务潜在痛点，从用户体验、技术可行性、成本效益多维度出发，提出创新性技术解决方案，助力业务破局增长' },
                { title: '基础设施推动', content: '肩负推动前端基础设施建设重任，主导搭建与完善前端工程化体系，涵盖脚手架定制、组件库研发、自动化流程优化，赋能团队高效开发' },
                { title: '团队项目管理', content: '拥有卓越的团队管理与项目把控能力，能合理拆解项目任务，制定科学开发计划，高效带领团队攻克技术难关，确保项目按时高质量交付' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>
      </Row>

      {/* 下半部分高级前端能力详解 */}
      <Title level={2} className={styles.sectionTitle}>高级前端的能力</Title>
      <Row gutter={[24, 24]}>
        {/* 基建 */}
        <Col span={24}>
          <Card title={<Title level={3}>基建</Title>}>
            <Title level={4}>脚手架</Title>
            <List
              size="small"
              dataSource={[
                { title: '包管理运用', content: '熟练运用主流包管理工具 pnpm、npm、yarn，依据项目特性灵活选型，精准配置依赖，解决依赖冲突' },
                { title: '环境变量管理', content: '借助 dotenv 高效管理项目环境变量，实现开发、测试、生产多环境一键切换' },
                { title: '命令行工具定制', content: '基于 commander 定制命令行工具，拓展项目启动、构建、部署等个性化指令' },
                { title: '日志规范设置', content: '集成 log - symbols 规范日志输出样式，增强日志可读性' },
                { title: '版本管理把控', content: '运用 semver 严格把控版本号，遵循语义化版本规范发布迭代' },
                { title: '命令行交互实现', content: '结合 inquirer 实现命令行交互，引导用户输入关键信息' },
                { title: '加载效果优化', content: '搭配 ora、spinner 优化命令行加载效果，提升操作反馈及时性' },
                { title: '代码分支自动化', content: '深度整合 GitFlow 工作流，实现代码分支自动化管理，结合 GitHub/Gitee API 打通远程代码托管平台，实现高效协同开发' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>

        {/* 研发 */}
        <Col span={24}>
          <Card title={<Title level={3}>研发</Title>}>
            <Title level={4}>技术选型</Title>
            <List
              size="small"
              dataSource={[
                { title: 'Vue 技术生态运用', content: '在 Vue 技术生态，精通 Vue2/3 核心原理，熟练搭配 Vue - Router 实现路由管理，结合 Vuex 或 Pinia 进行状态管理，全程采用 TS 进行类型约束，保障代码健壮性' },
                { title: 'React 技术生态运用', content: '于 React 技术生态，熟练运用 React（Hooks）编写函数式组件，结合 React - Router 构建单页应用路由体系，搭配 MobX 或 Redux 高效管控复杂应用状态，同样以 TS 加持代码质量' },
                { title: '移动端适配方案', content: '移动端适配层面，精准运用 vm/vh/vw 视口单位结合 postcss - px - to - viewport 插件，一键适配多尺寸移动设备' },
                { title: '组件库合理选型', content: '组件库选型游刃有余，依据项目风格、性能需求挑选 Ant Design、Arco Design、Element UI、Vant 等优质库' },
                { title: 'CSS 技术运用', content: 'CSS 编写遵循 Less、Sass 预处理器规范，巧用 CSS Modules 实现样式模块化封装' },
                { title: '跨端技术探索', content: '跨端技术领域，驾驭 Electron 打造桌面端应用，运用 Flutter、Tauri 开发高性能跨平台移动端应用' },
                { title: '跨端工具使用', content: '跨端工具方面，借助 uni - app、Taro 快速构建多端小程序与 H5 应用' },
                { title: '业务系统适配', content: '业务系统适配多样，能为 ToB 管理系统打造专业高效界面，为门户网站优化视觉交互，确保移动端 H5 流畅体验，雕琢小程序精致功能' },
                { title: '数据可视化', content: '数据可视化借助 ECharts、AntV 绘制精美图表，满足复杂业务展示需求' },
                { title: '前沿技术掌握', content: '探索前沿领域，掌握 WebRTC 实现实时音视频通讯、WebGL 渲染 3D 场景、Canvas 绘制图形动画、SVG 构建矢量图形' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>

        {/* 构建 */}
        <Col span={24}>
          <Card title={<Title level={3}>构建与规范</Title>}>
            <Title level={4}>代码规范</Title>
            <List
              size="small"
              dataSource={[
                { title: 'JavaScript 规范搭建', content: '搭建严谨的代码规范体系，集成 ESLint 深度检查 JavaScript 代码语法与风格问题，结合 Prettier 自动格式化代码，确保代码风格统一' },
                { title: 'CSS 规范校验', content: '运用 Stylelint 严格校验 CSS 代码规范，杜绝样式书写隐患' },
                { title: '提交信息规范', content: '借助 Husky 与 Git 钩子深度绑定，在代码提交前自动触发 lint - staged 检查暂存区代码，配合 commitlint 规范提交信息，从源头保障代码质量' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
            <Divider />

            <Title level={4}>构建优化</Title>
            <List
              size="small"
              dataSource={[
                { title: '包分析与优化', content: '借助 webpack - bundle - analyzer 精准剖析打包产物构成，定位体积冗余模块针对性优化' },
                { title: '构建流程优化', content: '深度优化 Webpack/Vite 构建流程，调整 chunk 分割策略、优化模块加载顺序' },
                { title: '压缩算法应用', content: '启用 Gzip/Brotli 压缩算法，大幅削减传输文件体积' },
                { title: '代码分割策略', content: '合理规划 CSS/JS 代码分割，实现页面按需加载，提升首屏渲染速度' },
                { title: '动态导入运用', content: '运用 Dynamic Import 动态导入技术，懒加载非关键资源' },
                { title: '路由懒加载优化', content: '全面优化路由懒加载机制，加速页面跳转响应' },
                { title: '图片优化处理', content: '图片资源采用无损压缩、响应式加载等手段优化处理' },
                { title: '网络加速技术', content: '借助 HTTP2/CDN 加速技术，突破网络瓶颈，加快资源分发' },
                { title: '无用代码剔除', content: '激活 Tree Shaking 优化，剔除无用代码，精简打包产物' },
                { title: '作用域提升优化', content: '利用 Scope Hoisting 作用域提升技术，减少函数闭包开销，提升代码执行效率' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
            <Divider />
            <Title level={4}>构建工具使用</Title>
            <List
              size="small"
              dataSource={[
                { title: 'Webpack 功能运用', content: '熟练运用 Webpack 强大的模块打包功能，定制复杂项目构建流程' },
                { title: 'Vite 项目开发', content: '依托 Vite 极速冷启动与热更新优势，高效开发 Vue 项目' },
                { title: 'Rollup 库打包', content: '选用 Rollup 精准打包 JavaScript 库，产出轻量、高效模块' },
                { title: 'Babel 代码编译', content: '借助 Babel 编译 ES6 + 代码，适配低版本浏览器' },
                { title: '高性能编译', content: '引入 SWC/esbuild 高性能编译器，大幅提升代码编译速度，缩短构建耗时' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>

        {/* 部署 */}
        <Col span={24}>
          <Card title={<Title level={3}>部署与运维</Title>}>
            <Title level={4}>持续集成/部署</Title>
            <List
              size="small"
              dataSource={[
                { title: 'GitHub Actions 自动化', content: '深度集成 GitHub Actions 搭建自动化工作流，涵盖代码拉取、安装依赖、测试、打包、部署全流程自动化' },
                { title: 'Jenkins 持续集成', content: '熟练运用 Jenkins 持续集成平台，定制复杂流水线任务，适配大规模项目持续集成需求' },
                { title: 'GitLab CI/CD 运用', content: '依托 GitLab CI/CD 实现代码托管与持续集成部署一体化' },
                { title: 'Docker 容器化部署', content: '借助 Docker 容器化技术，将应用及其依赖打包成轻量、可移植容器，一键部署到任意环境' },
                { title: 'Kubernetes 容器编排', content: '运用 Kubernetes 编排容器集群，实现容器自动化部署、扩缩容、负载均衡' },
                { title: 'KubeSphere 容器管理', content: '选用 KubeSphere 一站式容器管理平台，可视化运维容器资源，降低运维成本' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
            <Title level={4}>服务配置</Title>
            <List
              size="small"
              dataSource={[
                { title: 'Nginx 服务搭建', content: '运用 Nginx 搭建高性能反向代理与负载均衡服务，分流请求，提升系统并发处理能力' },
                { title: '安全证书配置', content: '妥善配置 HTTPS/SSL 证书，加密数据传输，保障网络安全' },
                { title: '域名解析备案', content: '精准完成域名解析与备案流程，确保网站合法合规上线' },
                { title: 'CDN 接入运用', content: '合理接入 CDN 内容分发网络，缓存 static资源，加速全球用户访问' },
                { title: '对象存储对接', content: '高效对接对象存储服务(OSS)，存储海量文件资源，降低本地存储压力' },
                { title: '云服务器管理', content: '熟练管理云服务器(ECS)资源，按需调配 CPU、内存、带宽' },
                { title: '监控告警搭建', content: '搭建完善监控告警配置，实时洞察系统运行状态，及时响应故障' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>

        {/* 研发流程 */}
        <Col span={24}>
          <Card title={<Title level={3}>研发流程</Title>}>
            <List
              size="small"
              dataSource={[
                { title: '前期规划工作', content: '项目伊始，主导架构设计与技术选型工作，权衡技术可行性、性能表现、开发成本，敲定最佳方案；深度参与需求分析与方案设计环节，协同产品、后端团队，精准拆解业务需求，输出详细技术方案；把控数据库设计与评审流程，优化数据结构，保障数据存储高效、查询便捷' },
                { title: '开发执行阶段', content: '科学制定开发计划与任务分解，合理安排团队成员工作，明确时间节点；严格规范多人协作与版本控制流程，基于 Git 高效协同，借助分支管理、代码合并策略保障代码质量' },
                { title: '质量把控环节', content: '定期组织 Code Review 代码审查，分享优秀实践，及时揪出代码隐患；建立完善 Bug 跟踪与完成流程，借助专业工具记录、分配、跟进问题，确保快速闭环' },
                { title: '后期优化工作', content: '持续推进性能优化与监控工作，运用专业工具实时监测系统性能指标，针对性优化' },
                { title: '总结复盘阶段', content: '项目收尾阶段，精心组织项目总结与复盘，沉淀经验教训，完善技术文档维护，为后续项目提供参考' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>

        {/* 团队建设 */}
        <Col span={24}>
          <Card title={<Title level={3}>团队建设</Title>}>
            <List
              size="small"
              dataSource={[
                { title: '绩效考核制度', content: '主导制定科学合理的绩效考核制度，量化考核指标，公正评估团队成员工作表现，激励成员成长' },
                { title: '人才筛选把关', content: '精通面试技巧，精准识别优质前端人才，从技术实力、团队协作、学习能力多维度把关' },
                { title: '汇报沟通促进', content: '定期组织工作汇报，督促成员梳理工作成果、规划后续计划，促进团队信息互通' },
                { title: '职业发展助力', content: '悉心指导成员晋升答辩，助力职业发展' },
                { title: '团队协作提升', content: '强化团队沟通技巧培训，提升成员沟通效率与协作默契' },
                { title: '技术分享推动', content: '定期举办技术分享会，营造技术学习氛围，促进团队技术共进' }
              ]}
              renderItem={(item) => <List.Item><div className="item-title">{item.title}</div><div className="item-content">{item.content}</div></List.Item>}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default FrontendInfrastructure;
